<template>
	<div class="container">
		<div class="titles">
			<div @click="checkAll">
				<img :src="checkStatus == true ? imgRadioOn : imgRadio" alt="">
				全选
			</div>
			<div>
				<button v-if="read == false" @click="tagMsgStatus">
					标记为已读
				</button>
				<button @click="deleteItem">
					删除
				</button>
			</div>
		</div>
		<div v-for="(item, index) in dataList" :key="item.id" class="orderDetail">
			<div class="orderStatus">
				<img :src="arrEmpty.includes(index) ? imgRadioOn : imgRadio" class="checkRadio"
					@click="checkMore(index)">
				<div class="order_stitle">
					{{ item.subMessageType.typename }}
				</div>
				<div class="time">
					{{ item.subMessageType.pubuts }}
				</div>
			</div>
			<div class="order_box">
				
				<div class="order_info">
					<!-- <img
            :src="item.img"
            alt=""
          > -->
					<div class="title_box">
						<div>{{ item.bulletinText }}</div>
						<!-- <div>查看详情 ></div> -->
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import imgRadioOn from "../../assets/img/radio_on.png";
	import imgRadio from "../../assets/img/radio.png";
	// import imgSrc from '../../assets/img/order1.png';
	export default {
		props: ["typevalue", "read", "types"],
		data() {
			return {
				checkStatus: false,

				arrEmpty: [],
				dataArr: [],
				imgRadioOn: imgRadioOn,
				imgRadio: imgRadio,

				dataList: [{
					subMessageType: {
						typename: "",
						subMessageType: "",
					},
				}, ],
				pageIndex: 1,
				pageSize: 10,
				type: "all",
				idList: [],
			};
		},
		watch: {},
		mounted() {
			this.getMsgList(this.type, false);
		},
		methods: {
			//消息列表
			getMsgList(message_type, bReaded) {
				let data = {
					token: localStorage.getItem("token"),
					pageIndex: this.pageIndex,
					pageSize: this.pageSize,
					bReaded: bReaded, //已读
					message_type: message_type, //all代表全部消息 可选值order，account，system
				};
				this.$api.person.userMsgList(data).then((res) => {
					// 执行某些操作
					if (res.code == 200) {
						this.dataList = res.data.bulletins;
						this.arrEmpty = []
						this.dataArr = []
					}
				});
			},
			//标记已读
			tagMsgStatus() {
				if (this.idList.length == 0) {
					this.$message.error("请标记消息");
					return false;
				} else {
					let data = {
						bIdList: this.idList,
					};
					this.$api.person.updateMsgList(data).then((res) => {
						// 执行某些操作
						if (res.code == 200) {
							// console.log(res.data);
							this.$message.success(res.message);
							this.getMsgList(this.type, this.read);
						}
					});
				}
			},
			// 全选
			checkAll() {
				this.checkStatus = !this.checkStatus;
				this.arrEmpty = [];
				this.dataArr = [];
				if (this.checkStatus) {
					this.dataList.forEach((item, index) => {
						this.arrEmpty.push(index);
						this.dataArr.push(item);
						this.$set(item, "isSelected", true);
					});
				}
				// console.log(this.arrEmpty);
				console.log(this.dataArr);
				let idList = [];
				this.dataArr.forEach((item) => {
					idList.push(item.id);
				});
				this.idList = idList;
			},
			//多选
			checkMore(i) {
				var idx = this.arrEmpty.indexOf(i);
				//如果已经选中了，那就取消选中，如果没有，则选中
				if (idx > -1) {
					this.arrEmpty.splice(idx, 1);
					this.dataArr.splice(idx, 1);
				} else {
					this.arrEmpty.push(i);
					this.dataArr.push(this.dataList[i]);
				}
				if (this.dataArr.length == this.dataList.length) {
					this.checkStatus = true;
				}
				// console.log(this.arrEmpty);
				console.log(this.dataArr);
				// console.log(this.dataList);
				let idList = [];
				this.dataArr.forEach((item) => {
					idList.push(item.id);
				});
				console.log(idList);
				this.idList = idList;
			},
			// 删除选中项
			deleteItem() {
				if (this.idList.length == 0) {
					this.$message.error("请标记消息");
					return false;
				} else {
					let data = {
						bIdList: this.idList,
					};
					if (this.idList == {}) {
						this.$message.warning("请标记消息！");
					} else {
						this.$api.person.deleteMsgList(data).then((res) => {
							// 执行某些操作
							if (res.code == 200) {
								// console.log(res.data);
								this.$message.success(res.message);
								this.getMsgList(this.types, this.read);
								this.idList = []
							}
						});
					}

				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.container {
		height: 65.56rem;
		background: #fff;
		margin-bottom: 1.88rem;
		overflow-y: scroll;
		position: relative;

		.titles {
			padding: 1.44rem 3.44rem 1.44rem 1.81rem;
			font-size: 0.88rem;
			background-color: #fff;
			color: #666;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			>div {
				object-fit: contain;

				img {
					vertical-align: middle;
				}

				button {
					padding: 0.31rem 1.19rem;
					border: 0.06rem solid #999999;
					color: #666;
					background: #fff;
					outline: none;
					border-radius: 0.24rem;
					margin-left: 1.56rem;
				}
			}
		}

		.orderDetail {
			padding-left: 4.56rem;

			.orderStatus {
				display: flex;
				flex-direction: row;
				padding-bottom: 1.06rem;
				border-bottom: 0.06rem solid #dadada;
				position: relative;
				.checkRadio {
					position: absolute;
					left: -2.54rem;
					top: 8%;
					z-index: 99;
				}
				.order_stitle {
					font-size: 1.13rem;
					color: #666;
					border-left: 0.19rem solid #666;
					padding: 0 1.25rem 0 0.5rem;
				}

				.time {
					color: #7b7b7b;
					font-size: 0.88rem;
				}
			}

			.order_box {
				position: relative;
				padding: 1.56rem 0;

				

				.order_info {
					display: flex;
					flex-direction: row;
					object-fit: contain;

					img {
						width: 9.69rem;
						height: 9.69rem;
					}

					.title_box {
						padding-left: 2.06rem;
						font-size: 0.88rem;
						color: #7b7b7b;
						line-height: 2.5rem;
					}
				}
			}
		}
	}
</style>
